<template>
  <div class="phone">
    <el-form
      label-width="80px"
      :model="formPhone"
      size="large"
      status-icon
      :rules="rules"
      label-position="left"
      ref="ruleFormRef"
      style="max-width: 460px"
    >
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="formPhone.phone" />
      </el-form-item>
      <el-form-item label="验证码" prop="authCode">
        <div class="verfy-code">
          <el-input v-model="formPhone.authCode" />
          <el-button class="get-btn" type="primary">发送验证码</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import type { FormRules } from 'element-plus';

const formPhone = reactive({
  phone: '',
  authCode: ''
});

const rules = reactive<FormRules>({
  phone: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    {
      pattern: /^d{3}-d{8}|d{4}-{7,8}$/,
      message: '手机号必须为11位',
      trigger: 'blur'
    }
  ],
  authCode: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
});
</script>

<style lang="less" scoped>
.verfy-code {
  display: flex;

  .get-btn {
    margin-left: 15px;
  }
}
</style>
